<template>
  <div class="page-container-padding">
    <div class="index-form">
      <div class="page-title">新建一个数据库指标</div>
      <el-form label-width="80px" size="mini" :rules="rules">
        <el-form-item label="数据名称">
          <el-input
            v-model="indexObj.name"
            placeholder="数据指标名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="所在平台">
          <el-select
            v-model="indexObj.plat"
            placeholder="选择数据指标源所在平台"
            style="width: 100%"
          >
            <el-option value="ruizhi" label="系统自建" />
            <el-option value="ths" label="同花顺" />
            <el-option value="wind" label="万得" />
          </el-select>
        </el-form-item>
        <el-form-item label="数据ID" prop="exists">
          <el-input
            v-model="indexObj.plat_id"
            placeholder="数据指标所在平台ID"
            :disabled="indexObj.plat === 'ruizhi'"
          ></el-input>
        </el-form-item>
        <el-form-item label="数据频率">
          <el-select
            v-model="indexObj.frequency"
            placeholder="选择数据指标的频率"
            style="width: 100%"
          >
            <el-option value="日" label="日" />
            <el-option value="周" label="周" />
            <el-option value="月" label="月" />
            <el-option value="季" label="季" />
            <el-option value="年" label="年" />
          </el-select>
        </el-form-item>
        <el-form-item label="数据单位">
          <el-input
            v-model="indexObj.unit"
            placeholder="数据指标的单位"
          ></el-input>
        </el-form-item>
        <el-form-item label="开始日期">
          <el-date-picker
            v-model="indexObj.start_date"
            placeholder="数据指标的开始日期,可输入YYYY-MM-DD"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="数据源">
          <el-input
            v-model="indexObj.source"
            placeholder="数据指标的来源"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            v-model="indexObj.note"
            placeholder="备注"
            type="textarea"
            :rows="3"
          ></el-input>
        </el-form-item>
        <el-form-item style="text-align: right">
          <el-button type="primary" :loading="saveLoading" @click="toCreate">
            确定添加
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
  import { datetimeToStr } from '@/utils/datetimeUtils'
  import {
    CreateNewIndex,
    CheckIndexExist,
  } from '@/api/adminRuizhi/dataindexlib'
  export default {
    data() {
      let validateIndexExists = (rule, value, callback) => {
        if (!this.indexObj.plat || !this.indexObj.plat_id) return
        CheckIndexExist(this.indexObj.plat, this.indexObj.plat_id).then(
          (res) => {
            if (res.data.exist) {
              callback(new Error('该指标已存在!'))
            } else {
              callback()
            }
          }
        )
      }
      return {
        saveLoading: false,
        indexObj: {
          name: '',
          plat: '',
          plat_id: '',
          frequency: '',
          unit: '',
          start_date: new Date(),
          source: '',
          note: '',
        },
        rules: {
          exists: [
            {
              validator: validateIndexExists,
              trigger: 'blur',
            },
          ],
        },
      }
    },
    mounted() {},
    methods: {
      toCreate() {
        const bodyData = { ...this.indexObj }
        bodyData.start_date = datetimeToStr(this.indexObj.start_date, true, '-')
        this.saveLoading = true
        CreateNewIndex(bodyData).then((res) => {
          this.indexObj.name = ''
          this.$baseMessage('创建成功，前往指标管理查看.', 'success')
          this.saveLoading = false
        })
      },
    },
  }
</script>
<style scoped lang="scss">
  .page-title {
    color: #ff5f0e;
    font-weight: 700;
    margin-bottom: 16px;
    font-size: 16px;
  }
  .index-form {
    width: 600px;
    margin: 0 auto;
  }
</style>
